<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>仪表盘</h1>
      <p>欢迎回来，这里是您的数据概览</p>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-grid">
      <el-col :xs="24" :sm="12" :md="6" v-for="stat in statsData" :key="stat.key">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :class="stat.iconClass">
              <el-icon :size="24">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stat.value }}</h3>
              <p>{{ stat.label }}</p>
              <span class="stat-change" :class="stat.trend">
                {{ stat.change }}
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="24" class="charts-grid">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>项目趋势</span>
              <el-select v-model="projectChartType" size="small" style="width: 120px">
                <el-option label="近6个月" value="6months" />
                <el-option label="近12个月" value="12months" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-bars">
              <div 
                v-for="(bar, index) in projectChartData" 
                :key="index"
                class="bar" 
                :style="{ height: bar.height + '%' }"
                :title="`${bar.month}: ${bar.value}个项目`"
              ></div>
            </div>
            <p class="chart-label">项目数量统计</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>用户增长</span>
              <el-select v-model="userChartType" size="small" style="width: 120px">
                <el-option label="近6个月" value="6months" />
                <el-option label="近12个月" value="12months" />
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <div class="line-chart">
              <svg width="100%" height="120" viewBox="0 0 300 120">
                <path 
                  d="M0,100 L50,80 L100,60 L150,40 L200,30 L250,20 L300,15" 
                  stroke="#667eea" 
                  stroke-width="3" 
                  fill="none"
                />
                <path 
                  d="M0,100 L50,80 L100,60 L150,40 L200,30 L250,20 L300,15 L300,120 L0,120 Z" 
                  fill="url(#gradient)" 
                  opacity="0.3"
                />
                <defs>
                  <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#667eea;stop-opacity:0" />
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <p class="chart-label">用户注册趋势</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近活动 -->
    <el-card class="recent-activity" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>最近活动</span>
          <el-button type="primary" size="small" @click="refreshActivities">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>
      <div class="activity-list">
        <div 
          v-for="activity in recentActivities" 
          :key="activity.id" 
          class="activity-item"
        >
          <div class="activity-icon" :class="activity.type">
            <el-icon :size="16">
              <component :is="activity.icon" />
            </el-icon>
          </div>
          <div class="activity-content">
            <p class="activity-text">{{ activity.text }}</p>
            <span class="activity-time">{{ activity.time }}</span>
          </div>
          <el-button 
            v-if="activity.action" 
            type="primary" 
            size="small" 
            link
            @click="handleActivityAction(activity)"
          >
            {{ activity.action }}
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  DataBoard, 
  User, 
  Money, 
  SuccessFilled, 
  Refresh,
  Document,
  UserFilled,
  Wallet,
  RefreshRight,
  Check
} from '@element-plus/icons-vue'

// 统计数据
const statsData = reactive([
  {
    key: 'projects',
    label: '总项目数',
    value: 156,
    change: '+12% 本月',
    trend: 'positive',
    icon: Document,
    iconClass: 'project-icon'
  },
  {
    key: 'users',
    label: '注册用户',
    value: 2847,
    change: '+8% 本月',
    trend: 'positive',
    icon: User,
    iconClass: 'user-icon'
  },
  {
    key: 'funding',
    label: '总筹资金额',
    value: '¥2,847,500',
    change: '+15% 本月',
    trend: 'positive',
    icon: Money,
    iconClass: 'funding-icon'
  },
  {
    key: 'success',
    label: '成功率',
    value: '78%',
    change: '+3% 本月',
    trend: 'positive',
    icon: SuccessFilled,
    iconClass: 'success-icon'
  }
])

// 图表数据
const projectChartType = ref('6months')
const userChartType = ref('6months')

const projectChartData = reactive([
  { month: '1月', value: 12, height: 60 },
  { month: '2月', value: 16, height: 80 },
  { month: '3月', value: 9, height: 45 },
  { month: '4月', value: 18, height: 90 },
  { month: '5月', value: 14, height: 70 },
  { month: '6月', value: 17, height: 85 }
])

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    type: 'project',
    icon: Document,
    text: '新项目"智能手表众筹"已创建',
    time: '2分钟前',
    action: '查看'
  },
  {
    id: 2,
    type: 'user',
    icon: UserFilled,
    text: '用户张三完成实名认证',
    time: '5分钟前',
    action: '审核'
  },
  {
    id: 3,
    type: 'funding',
    icon: Wallet,
    text: '项目"环保水杯"达到目标金额',
    time: '10分钟前',
    action: '查看'
  },
  {
    id: 4,
    type: 'refund',
    icon: RefreshRight,
    text: '处理了3笔退款申请',
    time: '15分钟前',
    action: '处理'
  },
  {
    id: 5,
    type: 'audit',
    icon: Check,
    text: '审核通过项目"创意台灯"',
    time: '20分钟前',
    action: '查看'
  }
])

// 方法
const refreshActivities = () => {
  ElMessage.success('活动数据已刷新')
  // 这里可以调用API刷新数据
}

const handleActivityAction = (activity) => {
  ElMessage.info(`执行操作：${activity.action} - ${activity.text}`)
  // 这里可以执行具体的操作
}

// 监听图表类型变化
const updateChartData = () => {
  // 这里可以根据选择的类型更新图表数据
  ElMessage.info('图表数据已更新')
}

// 组件挂载时初始化数据
onMounted(() => {
  // 可以在这里调用API获取初始数据
  console.log('仪表盘已加载')
})
</script>

<style scoped>
.dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.dashboard-header p {
  color: #666;
  font-size: 16px;
}

.stats-grid {
  margin-bottom: 32px;
}

.stat-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.project-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.user-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.funding-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.success-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.stat-info h3 {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px 0;
}

.stat-info p {
  color: #666;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
}

.stat-change.positive {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.stat-change.negative {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.charts-grid {
  margin-bottom: 32px;
}

.chart-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  text-align: center;
  padding: 20px 0;
}

.chart-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  height: 120px;
  margin-bottom: 16px;
}

.bar {
  width: 30px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.bar:hover {
  transform: scaleY(1.1);
}

.line-chart {
  margin-bottom: 16px;
}

.chart-label {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.recent-activity {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.activity-item:hover {
  background: #f8f9fa;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.activity-icon.project {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.activity-icon.user {
  background: rgba(240, 147, 251, 0.1);
  color: #f093fb;
}

.activity-icon.funding {
  background: rgba(79, 172, 254, 0.1);
  color: #4facfe;
}

.activity-icon.refund {
  background: rgba(255, 87, 108, 0.1);
  color: #ff576c;
}

.activity-icon.audit {
  background: rgba(67, 233, 123, 0.1);
  color: #43e97b;
}

.activity-content {
  flex: 1;
}

.activity-text {
  color: #333;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.activity-time {
  color: #999;
  font-size: 12px;
}

:deep(.el-card__header) {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-card__body) {
  padding: 24px;
}

@media (max-width: 768px) {
  .stats-grid {
    margin-bottom: 24px;
  }
  
  .charts-grid {
    margin-bottom: 24px;
  }
  
  .stat-content {
    gap: 12px;
  }
  
  .stat-icon {
    width: 50px;
    height: 50px;
  }
  
  .stat-info h3 {
    font-size: 24px;
  }
}
</style> 